<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 定时请求最新的消息
        function fetchMQTTMessages() {
            $.get('/mqtt/messages', function(data) {
                // 更新消息列表
                $('#mqttMessages').empty();
                data.messages.forEach(function(message) {
                    $('#mqttMessages').append('<li>' + message + '</li>');
                });
            });
        }

        // 发送 MQTT 消息
        // docker run -id --name=rabbitmq -p 5671:5671 -p 5672:5672 -p 4369:4369 -p 15671:15671 -p 15672:15672 -p 25672:25672 -e RABBITMQ_DEFAULT_USER=admin -e RABBITMQ_DEFAULT_PASS=password rabbitmq:management
        function sendMQTTMessage(message) {
            $.post('/mqtt/send', { message: message });
        }

        // 定时请求最新的消息
        function fetchRabbitMQMessages() {
            $.get('/rabbitmq/messages', function(data) {
                // 更新消息列表
                $('#rabbitmqMessages').empty();
                if (data.messages !== "No messages available") {
                    data.messages.forEach(function(message) {
                        $('#rabbitmqMessages').append('<li>' + message + '</li>');
                    });
                } else {
                    $('#rabbitmqMessages').append('<li>No messages available</li>');
                }
            });
        }

        // 发送 RabbitMQ 消息
        function sendRabbitMQMessage(message) {
            $.post('/rabbitmq/send', { message: message });
        }

        $(document).ready(function() {
            // 每隔1秒钟请求一次最新的 MQTT 消息
            setInterval(fetchMQTTMessages, 1000);

            // 每隔1秒钟请求一次最新的 RabbitMQ 消息
            setInterval(fetchRabbitMQMessages, 1000);

            // 发送 MQTT 消息
            $('#mqttSendForm').submit(function(event) {
                event.preventDefault();
                var message = $('#mqttMessageInput').val();
                sendMQTTMessage(message);
                $('#mqttMessageInput').val('');
            });

            // 发送 RabbitMQ 消息
            $('#rabbitmqSendForm').submit(function(event) {
                event.preventDefault();
                var message = $('#rabbitmqMessageInput').val();
                sendRabbitMQMessage(message);
                $('#rabbitmqMessageInput').val('');
            });
        });
    </script>
</head>
<body>
    <h1>Chat</h1>
    <h2>MQTT Messages</h2>
    <ul id="mqttMessages">
        <!-- MQTT 消息列表将通过 JavaScript 更新 -->
    </ul>
    <form id="mqttSendForm" method="post" action="/mqtt/send">
        <input type="text" id="mqttMessageInput" name="message" placeholder="Enter your MQTT message">
        <button type="submit">Send MQTT</button>
    </form>

    <h2>RabbitMQ Messages</h2>
    <ul id="rabbitmqMessages">
        <!-- RabbitMQ 消息列表将通过 JavaScript 更新 -->
    </ul>
    <form id="rabbitmqSendForm" method="post" action="/rabbitmq/send">
        <input type="text" id="rabbitmqMessageInput" name="message" placeholder="Enter your RabbitMQ message">
        <button type="submit">Send RabbitMQ</button>
    </form>
</body>
</html>
